﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IsMe.aspx.cs" Inherits="WebApplication4.WebForm3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>Downloaded from www.cssmoban.com</title>

<meta name="description" content="" />
<meta name="author" content="" />

<!-- CSS  -->
<link href="IsMe/css/master.css" rel="stylesheet" type="text/css" />
<link href="IsMe/css/theme/themeBlue.css" rel="stylesheet" type="text/css" />
<link href="IsMe/css/flexslider.css" rel="stylesheet" type="text/css" />
<link href="IsMe/css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="IsMe/css/jpreloader.css" rel="stylesheet" type="text/css" />

<!-- Fonts  -->
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css' />

<!-- Scripts  -->
<script type="text/javascript" src="IsMe/lib/jquery-1-7-2.min.js"></script>
<script type="text/javascript" src="IsMe/lib/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="IsMe/lib/jquery.isotope.min.js"></script>
<script type="text/javascript" src="IsMe/lib/lightbox.js"></script>
<script type="text/javascript" src="IsMe/lib/jquery.validate.min.js"></script>
<script type="text/javascript" src="IsMe/lib/jpreLoader.min.js"></script>
<script type="text/javascript" src="IsMe/lib/custom.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
<!-- Wrapper -->
<div id="wrapper">
	<!-- Header -->
	<div id="header">
    	<div id="header-inner" class="inner">
        	<ul id="menu">
            	<li class="menu-list"><div id="menu-intro" class="menu-icon menu-active">Intro</div><a href="#" class="menu-hover">Intro</a></li>
            	<li class="menu-list menu-click"><div id="menu-resume" class="menu-icon">Intro</div><a href="#" class="menu-hover">Resume</a></li>
            	<li class="menu-list menu-click"><div id="menu-portfolio" class="menu-icon">Intro</div><a href="#" class="menu-hover">Portfolio</a></li>
            	<li class="menu-list menu-click"><div id="menu-contact" class="menu-icon">Intro</div><a href="#" class="menu-hover">Contact</a></li>
            </ul>
            
            <!-- Slider -->
            <div id="menu-slider">
                <div id="menu-slider-container">
                    <div class="slider-bg bg-black"></div> <!-- Slider Background -->
                    <div id="menu-slider-bar" class="slider-bar color-bar animate-bar"></div> <!-- Slider Bar -->
                    <div id="menu-slider-pointer" class="slider-pointer color-pointer"></div> <!-- Slider Pointer -->
                </div>
            </div>
            <!-- End Slider -->
            
        </div>
    </div>
	<!-- End Header -->
    
    <!-- Content -->
    <div id="content" class="inner">
    	<!-- Title -->
        <h1 class="title-active">HOME</h1>
        <h1>ABOUT</h1>
        <h1>RESUME</h1>
        <h1>PORTFOLIO</h1>
        <h1>CONTACT</h1>
    	<!-- End Title -->
        
        <div id="content-wrapper">
            <div id="content-header"></div> <!-- Content Header -->
            <div id="content-core-wrapper">
                <div id="content-core">
                    <!-- Intro -->
                    <div id="intro" class="content-list content-list-active">
                      
                        
                    	<div class="full-three separator"></div>
                    	
                    	<div class="one-three">
                        	<div class="photo-frame">
                            	<img src="IsMe/media/photos/me.jpg" alt="Photo of me" />
                            </div>
                        </div>
                    	<div class="two-three">
                            <h2>My name is Sandy Ricardo</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra porta dictum. Nullam sem quam, ultrices semper congue eu, placerat ac quam. Pellentesque tempor nisi eu turpis feugiat ornare. Nullam risus enim, eleifend non imperdiet vel, fermentum quis tellus. Nulla pretium orci nec metus lobortis non convallis sem porta. Praesent hendrerit adipiscing mauris vitae sodales. Proin eget risus in velit blandit rhoncus imperdiet at mi. Sed eleifend, augue et tincidunt condimentum, massa tellus hendrerit odio, vel vehicula leo ligula sed lorem. Quisque adipiscing, enim vel iaculis venenatis, velit leo viverra tellus, ac sagittis neque velit in sem. Sed elementum tincidunt velit, ac gravida magna aliquam ac. Sed viverra mollis nisl, at ullamcorper mauris condimentum vel. Vestibulum nisl mi, lacinia rhoncus congue sit amet, convallis eget quam. Vestibulum interdum imperdiet justo laoreet tempor. </p>
                            <p>Morbi ultrices malesuada nisi, quis elementum velit blandit ac. Fusce auctor ornare lectus, in feugiat 
    nisi pretium non. Nam dignissim rutrum diam in feugiat. Vivamus varius dictum malesuada. Quisque 
    elit quam, lobortis ut euismod ac, feugiat nec mi. Morbi sed turpis nec lacus aliquam vulputate a vitae 
    erat. Maecenas non risus dolor. Etiam mi nulla, rhoncus in aliquet eu, venenatis feugiat sapien. 
    Vestibulum sapien ipsum, egestas sed consequat eget, auctor nec erat. </p>
                    	</div>
                        
                        <div class="clearfix"></div>
                    </div>
                    <!-- End Intro -->
                    
                    <!-- Resume -->
                    <div id="resume" class="content-list">
                    	<div class="one-three">
                        	<div class="photo-frame">
                            	<img src="IsMe/media/photos/me.jpg" alt="Photo of me" />
                            </div>
                        </div>
                    	<div class="two-three">
                        	<div class="group-container">
                                <h2>About me</h2>
                                <div class="resume-group">
                                    <div class="resume-label">Name</div>
                                    <div class="resume-info">Sandy Ricardo</div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">Date of birth</div>
                                    <div class="resume-info">May, 29 1989</div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">Address</div>
                                    <div class="resume-info">Imagination street of mine, Imagination City, IC 54437</div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">Email</div>
                                    <div class="resume-info">sandyricardo@bouncepixel.com</div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">Phone</div>
                                    <div class="resume-info">+62 817 643 9707</div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                            
                        	<div class="group-container">
                                <h2>Skills</h2>
                                <div class="resume-group">
                                    <div class="resume-label">Photoshop</div>
                                    <div class="resume-info">
                                    	<div class="resume-bar">
                                            <div class="slider-bg bg-grey"></div> <!-- Slider Background -->
                                            <div class="slider-bar color-bar level9"></div> <!-- Slider Bar -->
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">Illustrator</div>
                                    <div class="resume-info">
                                    	<div class="resume-bar">
                                            <div class="slider-bg bg-grey"></div> <!-- Slider Background -->
                                            <div class="slider-bar color-bar level5"></div> <!-- Slider Bar -->
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">Flash animation</div>
                                    <div class="resume-info">
                                    	<div class="resume-bar">
                                            <div class="slider-bg bg-grey"></div> <!-- Slider Background -->
                                            <div class="slider-bar color-bar level4"></div> <!-- Slider Bar -->
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">UI and UX</div>
                                    <div class="resume-info">
                                    	<div class="resume-bar">
                                            <div class="slider-bg bg-grey"></div> <!-- Slider Background -->
                                            <div class="slider-bar color-bar level9"></div> <!-- Slider Bar -->
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">HTML 5 & CSS 3</div>
                                    <div class="resume-info">
                                    	<div class="resume-bar">
                                            <div class="slider-bg bg-grey"></div> <!-- Slider Background -->
                                            <div class="slider-bar color-bar level8"></div> <!-- Slider Bar -->
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="resume-group">
                                    <div class="resume-label">jQuery</div>
                                    <div class="resume-info">
                                    	<div class="resume-bar">
                                            <div class="slider-bg bg-grey"></div> <!-- Slider Background -->
                                            <div class="slider-bar color-bar level6"></div> <!-- Slider Bar -->
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                    	</div>
                        
                    	<div class="full-three">
                        	<div class="group-container">
                                <h2>Education</h2>
                                <div class="resume-group">
                                    <h3>University of Imagination - Computer Science, 2007</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat nunc. Phasellus vel orci ligula. Quisque dignissim velit vel augue adipiscing quis porta neque congue. Aliquam vulputate, odio sed rutrum eleifend, nisi mi facilisis turpis, ut sodales quam lectus eu felis. Pellentesque justo magna, tincidunt vel dignissim nec, tincidunt id nisi. Maecenas varius quam at ante laoreet quis semper ante egestas. In et velit dui. Sed porttitor condimentum rhoncus. </p>
                                </div>
                            </div>
                        </div>
                        
                    	<div class="full-three">
                        	<div class="group-container">
                                <h2>Experience</h2>
                                <div class="resume-group">
                                    <h3>Graphic Designer - Ricardo tech, 2010 - 2011</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat nunc. Phasellus vel orci ligula. Quisque dignissim velit vel augue adipiscing quis porta neque congue. Aliquam vulputate, odio sed rutrum eleifend, nisi mi facilisis turpis, ut sodales quam lectus eu felis. Pellentesque justo magna, tincidunt vel dignissim nec, tincidunt id nisi. Maecenas varius quam at ante laoreet quis semper ante egestas. In et velit dui. Sed porttitor condimentum rhoncus. </p>
                                </div>
                                
                                <div class="resume-group">
                                    <h3>Art Director - Ricardo tech, 2011 - NOW</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat nunc. Phasellus vel orci ligula. Quisque dignissim velit vel augue adipiscing quis porta neque congue. Aliquam vulputate, odio sed rutrum eleifend, nisi mi facilisis turpis, ut sodales quam lectus eu felis. Pellentesque justo magna, tincidunt vel dignissim nec, tincidunt id nisi. Maecenas varius quam at ante laoreet quis semper ante egestas. In et velit dui. Sed porttitor condimentum rhoncus. </p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="clearfix"></div>
                    </div>
                    <!-- End Resume -->
                    
                    <!-- Portfolio -->
                    <div id="portfolio" class="content-list">
                        <!-- Portfolio Filter -->
                        <div id="portfolio-filter-container">
                            <ul id="portfolio-filter">
                                <li><a href="#" class="current" data-filter="*">All</a></li>
                                <li><a href="#" data-filter=".animation">Animation</a></li>
                                <li><a href="#" data-filter=".photography">Photoghraphy</a></li>
                                <li><a href="#" data-filter=".webdesign">Web Design</a></li>
                                <li><a href="#" data-filter=".printdesign">Print Design</a></li>
                            </ul>
                        </div>
                        <!-- End Portfolio Filter -->
                        
                        <!-- Portfolio Lists -->
                        <ul id="portfolio-list">
                            <li class="photography">
                                <a href="IsMe/media/portfolio/preview1.jpg" rel="lightbox[portfolio]" title="Photography">
                                    <img src="IsMe/media/portfolio/photo1.jpg" alt="" />
                                </a>
                            </li>
                            <li class="animation">
                                <a href="IsMe/media/portfolio/preview2.jpg" rel="lightbox[portfolio]" title="Animation">
                                    <img src="IsMe/media/portfolio/photo2.jpg" alt="" />
                                </a>
                            </li>
                            <li class="animation">
                                <a href="IsMe/media/portfolio/preview3.jpg" rel="lightbox[portfolio]" title="Animation">
                                    <img src="IsMe/media/portfolio/photo3.jpg" alt="" />
                                </a>
                            </li>
                            <li class="printdesign">
                                <a href="IsMe/media/portfolio/preview4.jpg" rel="lightbox[portfolio]" title="Print Design">
                                    <img src="IsMe/media/portfolio/photo4.jpg" alt="" />
                                </a>
                            </li>
                            <li class="animation">
                                <a href="IsMe/media/portfolio/preview5.jpg" rel="lightbox[portfolio]" title="Animation">
                                    <img src="IsMe/media/portfolio/photo5.jpg" alt="" />
                                </a>
                            </li>
                            <li class="animation">
                                <a href="IsMe/media/portfolio/preview6.jpg" rel="lightbox[portfolio]" title="Animation">
                                    <img src="IsMe/media/portfolio/photo6.jpg" alt="" />
                                </a>
                            </li>
                            <li class="webdesign">
                                <a href="IsMe/media/portfolio/preview7.jpg" rel="lightbox[portfolio]" title="Web Design">
                                    <img src="IsMe/media/portfolio/photo7.jpg" alt="" />
                                </a>
                            </li>
                            <li class="printdesign">
                                <a href="IsMe/media/portfolio/preview8.jpg" rel="lightbox[portfolio]" title="Print Design">
                                    <img src="IsMe/media/portfolio/photo8.jpg" alt="" />
                                </a>
                            </li>
                        </ul>
                        <!-- End Portfolio Lists -->
                        
                    </div>
                    <!-- End Portfolio -->
                    
                    <!-- Contact -->
                    <div id="contact" class="content-list content-contact">
                    	<div class="full-three">
                        	<div id="gmap-container">
                        		<div id="gmap"></div>
                            </div>
                        </div>
                        
                    	<div class="full-three separator"></div>
                        
                    	<div class="two-three">
                            <h2>Drop me a line</h2>
                            <form id="contact-form" method="POST" action="contact.php" />
                            	<div class="form-component">
                                    <h3>Name</h3>
                                    <input type="text" class="input textfield" name="name" />
                                </div>
                                
                            	<div class="form-component">
                                    <h3>Email</h3>
                                    <input type="text" class="input textfield" name="email" />
                                </div>
                                
                            	<div class="form-component">
                            		<h3>Message</h3>
                                	<textarea class="input textarea" name="message"></textarea>
                                </div>
                                
                                <input type="submit" class="btn" value="Submit" />
                            </form>
                            
                    	</div>
                    	<div class="one-three">
                            <h2>Contact Info</h2>
                            <h3>Address</h3>
                            <p>Imagination street of mine, Imagination City, IC 54437</p>
                            <h3>Phone</h3>
                            <p>+62 817 643 9707</p>
                            <h3>Email</h3>
                            <p>sandy@bouncepixel.com</p>
                            <h3>Web</h3>
                            <p>http://bouncepixel.com</p>
                        </div>
                        
                        <div class="clearfix"></div>
                    </div>
                    <!-- End Contact -->
                </div>
            </div>
            <div id="content-footer"></div> <!-- Content Footer -->
            
        </div>
        
        <!-- Social Media -->
        <div id="socmed">
            <ul id="socmed-list">
                <li><a href="#"><img src="IsMe/media/social/facebook.png" alt="Facebook" /></a></li>
                <li><a href="#"><img src="IsMe/media/social/twitter.png" alt="Twitter" /></a></li>
                <li><a href="#"><img src="IsMe/media/social/dribble.png" alt="Dribble" /></a></li>
                <li><a href="#"><img src="IsMe/media/social/flickr.png" alt="Flickr" /></a></li>
                <li><a href="#"><img src="IsMe/media/social/skype.png" alt="Skype" /></a></li>
                <li><a href="#"><img src="IsMe/media/social/google.png" alt="Google" /></a></li>
            </ul>
        </div>
        <!-- End Social Media -->
        
    </div>
    <!-- End Content -->
    
	<!-- Footer -->
	<div id="footer">
    	<div id="footer-inner" class="inner"> Copyright © Sandy Ricardo 2012 - More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a>
        </div>
    </div>
	<!-- End Footer -->
    
</div>
<!-- End Wrapper -->



<!-- This section is for Splash Screen -->
<div id="preloader-container">
    <div id="preloader">
        <div id="preloader-photo"><img src="IsMe/media/photos/me.jpg" alt="Photo of me" /></div>
        <div id="preloader-title">
        	<h1>PERSONAL VCARD</h1>
            UX & INTERACTIVE DESIGNER
        </div>
    </div>
</div>
<div id="jSplash"></div>
<!-- End of Splash Screen -->



<!-- External script put in the bottom of the page to cut load time -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

</body>
</html>
